<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <script>
    // 宽度 window.innerWidth
    // html 元素 document.documentElement
    // font-size style.fontSize
    // 匿名函数
    // (function() {
    //     // console.log('动态设置一下html的字体大小');
    //     let winWidth = window.innerWidth,
    //         oHTML = document.documentElement;
    //     // console.log(winWidth, oHTML);
    //     oHTML.style.fontSize = `${winWidth / 10}px`;
    //     // 动态设置一下html的字体大小
    // })()
    </script>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    ul, li {
        list-style: none;
    }
    body {
        --tm-PRICE-TEXT-COLOR: #ee0a55;
    }
    
    /* .row {
        display: flex;
    }
    .col {
        background-color: pink;
    }
    .col:first-child {
        background-color: green;
    }
    .col-1 { width: 1rem;}
    .col-2 { width: 2rem;}  
    .col-3 { width: 3rem;} 
    .col-4 { width: 4rem;} 
    .col-5 { width: 5rem;}
    .col-6 { width: 6rem;}  
    .col-7 { width: 7rem;}
    .col-8 { width: 8rem;}
    .col-9 { width: 9rem;} */
    .page__hd img {
        width: 10rem;
    }
    ul.goods {
        padding: 0.133333rem;

    }
    .goods__item {
        display: table;
    }
    .goods__item > .goods__figure,  
    .goods__item > .goods__figcaption {
        display: table-cell;
        padding: 0.16rem 0;
        vertical-align: top;
        background-color: #fff;
    }
    .goods__figure {
        width: 2.4rem;
        height: 2.4rem;
    }
    .goods__figure > img {
        max-width: 100%;
    }
    .goods__item .goods__figcaption {
        width: 7.2rem;
        padding-left: 0.2rem;
        padding-right: 0.2rem;
        position: relative;
        
    }
    .goods__figcaption .goods__title a {
        color: #333;
        line-height: 1.25;
    }
    .goods__figcaption .goods__price {
        padding: 0.15rem 0 0.2rem;
    }
    .goods__figcaption .goods__price small, 
    .goods__figcaption .goods__price span,
    .goods__figcaption .goods__price strong
    {
        display: inline-block;
        vertical-align: middle;
    }
    .goods__figcaption .goods__price span {
        font-size: 11px;
        background-color: var(--tm-PRICE-TEXT-COLOR);
        border-radius: .026667rem;
        padding: .026667rem .08rem .013333rem;
        color: #fff;
        font-weight: 700;
        margin-right: 0.0667rem;
    }
    .goods__figcaption .goods__price strong {
        font-weight: 700;
        color: var(--tm-PRICE-TEXT-COLOR);
        font-size: 16px;
        margin-right: 0.16rem;
    }
    .goods__figcaption .goods__price small {
        font-weight: 700;
        color: var(--tm-PRICE-TEXT-COLOR);
        font-size: 12px;
    }
    .goods__type {
        color: #ff3600;
    }
    .goods__btn {
        font-size: 14px;
        position: absolute;
        width: 2.13333rem;
        height: 0.64rem;
        background-color: var(--tm-PRICE-TEXT-COLOR);
        text-align: center;
        color: #fff;
        font-weight: 700;
        bottom: 0.1333rem;
        right: 0.2rem;
        border-radius: 0.0267rem;
    }
    </style>
</head>
<body>

<!-- <div class="row">
    <div class="col col-3">1</div>
    <div class="col col-7">2</div>
</div>
<div class="row">
    <div class="col col-4">3</div>
    <div class="col col-6">4</div>
</div> -->
<div class="page">
    <div class="page__hd">
        <h2>
            <img src="http://gw.alicdn.com/mt/TB1PNLZKXXXXXaTXXXXXXXXXXXX-750-481.jpg" alt="">
        </h2>
    </div>
    <div class="page__bd">
        <ul class="goods">
            <!-- <li class="goods__item">
                <a href="#" class="goods__figure ">
                    <img src="https://placeimg.com/350/350/people/grayscale" alt="">
                </a>
                <div class="goods__figcaption">
                    <div class="goods__title">
                        <a href="#">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093</a>
                    </div>
                    <div class="goods__price">
                        <span>双11价</span>
                        <strong>299.06</strong>
                        <small>(满400减100)</small>
                    </div>
                    <div class="goods__type">
                        1小时内热卖5885件
                    </div>
                    <a href="#" class="goods__btn">马上抢</a>
                </div>
            </li> -->
        </ul>
    </div>
</div>
<script>
const goods = [
    {
        "id": "641565544185",
        "pic": "https://img.alicdn.com/bao/uploaded/i4/1689187437/O1CN01LFwBH024oCDG9vm9E_!!1689187437.jpg_560x840Q50s50.jpg_.webp",
        "title": "鳄鱼男鞋夏季真皮厚底镂空透气防臭软底商务正装德比鞋休闲皮鞋男",
        "price": "158",
        "count": "1000"
    },
    {
        "id":"616602916456",
        "pic": "https://img.alicdn.com/bao/uploaded/i2/2200877014436/O1CN01iCkQ9K1idjXHp7h8g_!!2200877014436.jpg",
        "title": "Lancome/兰蔻法国口红菁纯哑光唇膏196胡萝卜色505苹果红润唇膏",
        "price": "239",
        "count": "2000+"
    },
    {
        "pic":"https://img.alicdn.com/imgextra/i4/2432508853/O1CN01koelto2FGj1e1a5jG_!!0-item_pic.jpg_430x430q90.jpg",
        "title": "【天猫百亿补贴5000元】凯迪拉克 XT6 天猫特别版 指定车型 订金",
        "price":"5000",
        "count":"28"
    },
    {
        "id":"2966545063",
        "pic" :"https://img.alicdn.com/bao/uploaded/i2/2966545063/O1CN017DZFc31nGtwgouMrt_!!2966545063.jpg_560x840Q50s50.jpg_.webp",
        "title" : "8848真皮手机",
        "price" : "29999",
        "count" : "1000"
    },
    {
        "id": "24185684799",
        "pic":"https://img.alicdn.com/imgextra/i2/2653951168/O1CN01Rmw5OO1KUzHUzzmEy_!!2653951168-0-scmitem6000.jpg",
        "title": "农夫山泉饮用天然水4L *4桶整箱装新老包装随机发货",
        "price": "33",
        "count": "82850",
    },
    {
        "id":"184681746",
        "pic":"https://g-search2.alicdn.com/img/bao/uploaded/i4/i4/772287406/O1CN013KY6LY24Zzvat42xi_!!0-item_pic.jpg_580x580Q90.jpg",
        "title":"是你最爱的GitHub文化衫",
        "price":"￥404",
        "count":"200"
    },
    {
        "id":"55375873",
        "pic" : "https://img.alicdn.com/imgextra/i4/6000000003207/TB2oBzbbKySBuNjy1zdXXXPxFXa_!!6000000003207-0-tbvideo.jpg_600x600.jpg",
        "titile":"花花公子男鞋夏季男士透气网面网鞋男休闲运动跑步鞋男旅游鞋子男",
        "price":'239',
        "count":280
    }
]
const goodsEle = document.querySelector('.goods');
for (let i = 0; i < goods.length; i++) {
    let item = goods[i];
    goodsEle.innerHTML += `
    <li class="goods__item">
        <a href="#" class="goods__figure ">
            <img src="${item.pic}" alt="">
        </a>
        <div class="goods__figcaption">
            <div class="goods__title">
                <a href="#">${item.title}</a>
            </div>
            <div class="goods__price">
                <span>双11价</span>
                <strong>${item.price}</strong>
                <small>(满400减100)</small>
            </div>
            <div class="goods__type">
                1小时内热卖${item.count}件
            </div>
            <a href="#" class="goods__btn">马上抢</a>
        </div>
    </li>
    `
}
</script>
</body>
</html>